<template>
  <div class="card">
    <div v-if="$slots.header" class="card-header">
      <slot name="header" message="hello" />
    </div>
    <div v-if="$slots.default" class="card-content">
      <slot text="默认插槽" :count="1" />
    </div>
    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useSlots, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const slots = useSlots()

onMounted(() => {
  const message = (slots.footer ? '' : '未') + '检测到 footer 插槽'
  ElMessage.info(message)
})

</script>

<style scoped lang="less">

</style>
